<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TAROT</title>
    <link rel="stylesheet" href="./css/normal.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/blog.css">
    <script src="./js/vue@2.js"></script>
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
</head>

<body>
    <div id="app" v-cloak>
        <t-header></t-header>
        <main class="container">
            <section>
                <div class="top">
                    <h1>Learn Tarot Reading</h1>
                    <p>Start learning tarot with simple guides and tips. Discover card meanings and master tarot reading
                        skills.</p>
                </div>
            </section>
            <div class="blog">
                <ul class="blog-list">
                    <li class="blog-list-item" v-for="item in blog" :key="item.id">
                        <div class="item_img">
                            <img :src="item.infographic" :alt="item.title">
                        </div>
                        <div class="item-content">
                            <h1 class="item-content-title">{{item.title}}</h1>
                            <p class="item-content-desc">
                                {{item.information}}
                            </p>
                            <span class="item-content-date">{{item.cdate}}</span>
                        </div>
                        <a :href="`./detail.html?id=${item.id}`"></a>
                    </li>
                </ul>
            </div>
        </main>
        <t-footer></t-footer>
    </div>
</body>
<script src="./main.js"></script>
<script type="module">
    import { header, footer } from './components/index.js'
    var vm = new Vue({
        el: '#app',
        components: {
            tHeader: header,
            tFooter: footer
        },
        data() {
            return {
                blog: []
            }
        },
        created() {
            this.handleFetchBlogList()
        },
        methods: {
            handleFetchBlogList() {
                fetch('https://migame.vip/gamefront/blog/blogApiList', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        pageNum: 1,
                        pageSize: 6,
                        siteId,
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.blog = res.data
                        }
                    })
                    .catch(err => {
                        throw new Error(err)
                    })
            },
        }
    })
</script>

</html>